<template>
  <div class="video-tip" @click="changeStatus">
    <div ref="tipIcon" :class="{
      'video-tip-icon': true,
      'loved': type === 'love' && status===true,
      'collected': type === 'collect' && status === true,
    }">
      <slot></slot>
    </div>
    <span class="video-tip-text">{{ text }}</span>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'VideoTip',
  props: {
    text: {
      type: Number,
      default: 0,
    },
    status: {
      type: Boolean,
      default: false,
    },
    // love, comment, collect, forward
    type: String,
  },
  mounted() {
    
  },
  methods: {
    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions('videoFunctionList', { addTypeNum: 'add_type_num' }),
    changeStatus() {
      this.addTypeNum([this.type, this.$refs.tipIcon.classList])
    }
  }
}
</script>

<style>
.video-tip{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.video-tip-icon{
  width: 60px;
  height: 60px;
}

.video-tip .video-tip-icon {
  transition: all 0.3s;
}

.loved svg path {
  fill: red;
}

.collected svg path {
  fill: rgb(255, 184, 2);
}

.video-tip:hover .video-tip-icon{
  transform: scale(1.2);
  transform-origin: center 40px;
  animation: 0.5s ease-in icon-hover;
}

@keyframes icon-hover {
  0%{
    transform: rotate(0);
    transform-origin: center 40px;
  }
  50%{
    transform: rotate(-20deg) scale(1.2);
    transform-origin: center 40px;
  }
  100%{
    transform: rotate(0) scale(1.2);
    transform-origin: center 40px;
  }
}

.video-tip-icon svg{
  width: 100%;
  height: 100%;
}

.video-tip-text{
  color: white;
  font-size: 18px;
}
</style>